<template>
  <div class="chart-box2">
    <div class="chart-title">
      <span>智能充电桩最近7天消费统计</span>
    </div>
    <div class="chart-content">
      <div class="chart-container" :id="chartId"></div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
  nextTick,
  watch,
  toRaw,
} from "vue";
import { Chart, registerTheme } from "@antv/g2";
import common from "../../utils/common";
import store from "../../../../store";
import {
  SwapOutlined
} from '@ant-design/icons-vue';
export default defineComponent({
  name: "IntelligentCharge",
  components:{SwapOutlined},
  setup() {
    const state = reactive({
      chartId: "intelligentChargeChart",
      chart: null,
      data: [],
      type:'line',
    });


    const initChart = () => {
      let data = state.data;
      console.log(data,'datadata');
      state.chart = new Chart({
        container: state.chartId,
        autoFit: true,
        appendPadding:[10,1,1,1],
        theme: "chartTheme",
      });

      state.chart.data(data);

      state.chart.tooltip({
        showCrosshairs: true,
        shared: true,
      });
      
      state.chart.line().position('time*value').tooltip("time*value", (time, value)=>{
        return {
          name:'消费',
          value:value + '元'
        }
      })
     
     
      state.chart.render();
    };

      watch(
        () => store.getters.centerControl.Energy_statisticsPile,
        (val) => {
          if (val) {
            getData();
          }
        }
      );

    const getData = () => {
      const { Energy_statisticsPile } = store.getters.centerControl;
      if(Energy_statisticsPile){
        state.data = Energy_statisticsPile.list
        if (state.chart) {
          state.chart.changeData(toRaw(state.data));
        } else {
          nextTick(() => {
            initChart();
          });
        }
      
      }

    };

    onMounted(() => {
      registerTheme("chartTheme", common.chartTheme);
      getData();
    });

    onBeforeUnmount(() => {
      const chartBox = document.getElementById(state.chartId);
      if (chartBox) {
        chartBox.innerHTML = "";
      }
    });
    
    return {
      ...toRefs(state),
     
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.chart-title{
  position: relative;
}
.change-icon{
  position: absolute;
  right: 0;
}
</style>
